<template>
    <div>
        <Header/>
        <div class="c_blog">
            <h4> {{blog.title}} </h4>
            <el-link icon="el-icon-edit" v-if="ownBlog">
                <router-link :to="{name:'BlogEdit',params:{bid:blog.id}}">编辑</router-link>
            </el-link>
            <el-divider></el-divider>
            <div v-html="blog_md" class="markdown-body"></div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header'
import {marked} from 'marked'
export default {
    name: "Blog",
    components: {Header},
    data() {
      return {
          blog: {
              id: '',
              title: '',
              description: '',
              content: ''
          },
          blog_md: '',
          ownBlog: false
      }
    },
    created() {
        const bid = this.$route.params.bid;
        if(bid) {
            const _this = this;
            this.$axios.get('/blog/'+bid).then(res => {
                const blog = res.data.data;
                _this.blog.id = blog.id;
                _this.blog.title = blog.title;
                _this.blog.description = blog.description;
                _this.blog.content = blog.content;
                //_this.blog = blog;
                _this.blog_md = marked(blog.content)
                _this.ownBlog = (blog.userId === _this.$store.getters.getUserInfo.id)
            })
        }
    }
}
</script>
<style scoped>
@import 'github-markdown-css/github-markdown.css';
/*@import 'github-markdown-css/github-markdown-dark.css';
@import 'github-markdown-css/github-markdown-light.css';*/
.c_blog {
    float: left;
    margin: 20px 120px;
}
</style>